<template>
<el-dialog title="借阅审核" :visible.sync="visible" width="700px" append-to-body :close-on-click-modal="false">
  <el-tabs v-model="tabActiveName">
    <el-tab-pane label="审核信息" name="approvalInfo">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-divider content-position="left">借阅信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="案卷号">{{borrowData.fileCode}}</el-descriptions-item>
          <el-descriptions-item label="提名">{{borrowData.title}}</el-descriptions-item>
          <el-descriptions-item label="借阅人">{{borrowData.userName}}</el-descriptions-item>
          <el-descriptions-item label="借阅类型">{{borrowData.billName}}</el-descriptions-item>
          <el-descriptions-item label="借出时间">{{borrowData.borrowTime}}</el-descriptions-item>
          <el-descriptions-item label="归还时间">{{borrowData.returnTime}}</el-descriptions-item>
          <el-descriptions-item label="用途" :span="2">{{borrowData.remark}}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{borrowData.reason}}</el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">审核信息</el-divider>
        <el-form-item label="审核意见" prop="remark">
          <el-input v-model="form.approvalOpinions"
                    type="textarea" :rows="5" placeholder="请输入审核意见"/>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="审核记录" name="approvalRecords">
      <el-table
        :data="borrowData.amApprovalList"
        style="width: 100%">
        <el-table-column prop="approvalName" label="审核人" width="180" />
        <el-table-column prop="approvalOpinions" label="审核意见" />
        <el-table-column prop="approvalTime" label="审核时间" width="180" >
          <template slot-scope="scope">
            {{ timeFormatter(scope.row.approvalTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="审核结果" >
          <template slot-scope="scope">
            <el-tag :type="statusTypeMap[scope.row.state]">{{ statusNameMap[scope.row.state] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit(2)">同 意</el-button>
    <el-button type="danger" @click="submit(3)">驳 回</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>
</template>

<script>
import {approveAmBorrow, getAmBorrow} from "@/api/am/amBorrow";
import {isEmpty} from "lodash";
import {getApprovalInfo} from "../../../api/am/amBorrow";
import dayjs from "dayjs";
export default {
  data() {
    return {
      visible: false,
      tabActiveName: 'approvalInfo',
      form: {
        id: '',
        objId: '',
        state: '',
        approvalOpinions: '',
      },
      rules: {},
      borrowData: {
        amApprovalList: []
      },
      statusTypeMap: {
        '0': 'warning',
        '1': 'default',
        '2': 'success',
        '3': 'danger',
        '4': 'info',
        '5': 'info',
      },
      statusNameMap: {
        '0': '未提交',
        '1': '审批中',
        '2': '同意',
        '3': '驳回',
        '4': '借出',
        '5': '归还',
      }
    }
  },
  computed: {
    timeFormatter() {
      return value => dayjs(value).format('YYYY-MM-DD')
    },
  },
  methods: {
    open(borrowData) {
      getApprovalInfo(borrowData.id).then(response => {
        this.borrowData = response.data
        if(!isEmpty(this.borrowData.amApprovalList)) {
          Object.keys(this.form).forEach(key => {
            this.form[key] = this.borrowData.amApprovalList[0][key]
          })
        }
        this.visible = true
      })
    },
    submit(state) {
      this.form.state = state
      this.form.objId = this.borrowData.id
      approveAmBorrow(this.form).then(response => {
        this.$modal.msgSuccess('借阅审核成功');
        this.$emit('success');
        this.cancel()
      })
    },
    cancel() {
      this.visible = false
    },
  }
}
</script>

<style lang="scss"></style>
